<!--响应式表单-->
<form [formGroup]="formModel" (submit)="onSearch()" novalidate>
  <div class="form-group" [class.has-error]="formModel.getError('minlength','title')">
    <label for="productName">商品名称:</label>
    <input type="text" id="productName" formControlName="title" class="form-control" placeholder="商品名称">
    <span [class.help-block]="!formModel.getError('minlength','title')">请至少输入3个字</span>
  </div>
  <div class="form-group">
    <label for="productPrice">商品价格:</label>
    <input type="number" id="productPrice" formControlName="price" class="form-control" placeholder="商品价格">
    <span [class.help-block]="!formModel.hasError('price','price')">{{formModel.getError('price','price')?.msg}}</span>
  </div>
  <div class="form-group">
    <label for="productCategory">商品类别:</label>
    <select id="productCategory" formControlName="category" class="form-control">
      <option value="-1">全部分类</option>
      <option *ngFor="let category of categorys">{{category}}</option>
    </select>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block">搜索</button>
  </div>
</form>
